<template>
    <div>
        <div class="wangyi">
        </div>
        <van-form>
            <div class="xiaban">
                <van-cell-group inset>
                    <van-field v-model="loginForm.username" required placeholder="邮箱账号" clearable />
                    <van-field v-model="loginForm.phone" center clearable placeholder="密码"></van-field>
                    <div class="text">
                        <span><a href="https://zc.reg.163.com/m/regInitialized?pd=yanxuan&pkid=QyOtTGv&pkht=you.163.com&tp=2&as=3&curl=https%3A%2F%2Fm.you.163.com%2Fucenter"
                                class="yu">注册账号</a></span>
                        <span><router-link to="/goiphone" class="deng">忘记密码</router-link></span>

                    </div>

                </van-cell-group>
                <div class="bnt">
                    <van-button type="danger" style="width:335px  ;">登陆</van-button>
                </div>
            </div>
        </van-form>


        <div class="qitan">

            <router-link to="/login">
                <p class="qita">其他登陆方式 > </p>

            </router-link>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'


const loginForm = ref({
    username: '',
    phone: '',
    checked: true
})



</script>

<style scoped>
.wangyi {
    height: 115px;
    width: 100%;
    background: url(../../../assets/网易.png) no-repeat 110px 20px;
    background-size: 140px;
}

.text {

    display: flex;
    justify-content: space-between;
    margin: 0 15px;
}

.deng {
    color: #7b7b7b;
    font-size: 6.2px;
}

.yu {
    color: #c0c0c0;
    font-size: 6.2px;
}

.bnt {
    padding-top: 12px;
    padding-left: 25px;
    padding-bottom: 10px;
}

.tex {
    display: flex;
    justify-content: center;
}

.tex p {
    font-size: 5px;
}

.tex p a {
    color: #1d89ff;
}

.xiaban {
    margin-top: 40px;
}

.qita {
    font-size: 14px;
    display: block;
}

.qitan {
    margin-left: 150px;
    margin-top: 50px;
}

.qitan p {
    color: black;
}</style>